<template>
  <div>
    <StatisticsHeader :title="title" :subtitle="subtitle" />
    <div style="margin-bottom: 15px;margin-top: 15px;">
      <el-row :gutter="20">
        <el-col v-if="show" :span="2">
          <el-button type="success" size="mini" @click="handleView">详情</el-button>
        </el-col>
        <el-col v-if="totalshow" :span="2">
          <el-button type="primary" size="mini" @click="handleTotal">
            {{ mode?'全部':'班级' }}
          </el-button>
        </el-col>
        <el-col v-if="mode" :span="16">
          <StatisticsPagination
            :layout="page.layout"
            :total="page.total"
            :current-page.sync="page.current"
            :page-size="page.size"
            :page-sizes="page.sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
    <div>
      <slot name="graph" />
    </div>
  </div>
</template>

<script>
import StatisticsHeader from './statistics-header'
import { StatisticsMixin } from '../../../components/mixin'
import StatisticsPagination from './../pagination'
export default {
  name: 'StatisticsItem',
  components: {
    StatisticsHeader: StatisticsHeader,
    StatisticsPagination: StatisticsPagination
  },
  mixins: [StatisticsMixin],
  props: {
    show: {
      type: Boolean,
      default: true
    },
    mode: {
      type: Boolean,
      default: false
    },
    totalshow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      page: {
        total: 100,
        current: 1,
        size: 1,
        layout: 'prev, pager, next, jumper'
        // sizes: [1]
      }
    }
  },
  methods: {
    handleView() {
      this.$emit('view')
    },
    handleTotal() {
      this.$emit('total')
    },
    handleSizeChange(size) {
      console.log('size', size)
      this.page.size = size
      this.$emit('size', size)
    },
    handleCurrentChange(page) {
      console.log('page', page)
      this.page.current = page
      this.$emit('page', page)
    }
  }
}
</script>

<style scoped>

</style>
